1. 首页>
  2. 技术文章>
  3. typescript学习笔记

typescript学习笔记

7/22/24 3:23:41 PM 浏览 430 评论 0

typescript

1、使用npm全局安装typescript

npm i -g typescript

2、使用tsc对ts文件进行编译

tsc ***.ts

3、在vscode中使用Code Runner运行ts代码,安装插件Code Runner
4、如果提示没有ts-node,则安装:

npm install -g ts-node

5、例子1:

let a = 10 //这里直接赋值,所以可以不用定义number
console.log(a)  
class Person{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log(`hello,my name is ${this.name},and i am ${this.age} years old`)
    }
}
let p = new Person("zhangsan",18)    
p.sayHello()

6、例子2,类型

//申明对象,{}用来指定对象中可以包含哪些属性
//age?问号表示属性是可选的
let a: {name:string,age?:number};
a = {name:'张三'}
//propName可以有任意属性,但必须有name属性
let c: {name:string,[propName:string]:any};
c = {name:'张三',age:18,sex:'男'}
//设置函数结构的类型声明 语法:(形参:类型,形参:类型...) => 返回值
let d:(a:number,b:number) => number;
d = function(a:number,b:number) : number{
    return a + b;
}
//数组
let f:number[];
let g:Array<number>;
//元组,固定长度的数组
let h: [string,number];
h = ['h',1]
//枚举
enum Color {Red = 1,Green = 2,Blue = 3}
console.log(Color.Red)
//& 表示同时
let k:{name:string} & {age:number}  
k = {name:'张三',age:18}

7、实时编译

tsc -w

8、tsconfig.json是编译的配置文件,比如内容:

{
    //用来指定哪些ts文件需要被编译
    "include": [
        "./*"
    ],

    "compilerOptions": {
        //用来指定ts被编译为的ES版本
        "target": "es5",
        //用来指定编译后文件所在目录
        "outDir": "./dist",
        //将代码合并成一个文件
        "outFile": "./dist/app.js",
        //开启所有严格检查
        "strict": true,
        //是否对对js文件进行编译,默认false
        "allowJs": true,
        //是否检查js文件,检查JS代码是否符合语法规范,默认false
        "checkJs": true,
        //不允许隐式的any类型
        "noImplicitAny": true,
        //不允许不明确类型的this
        "noImplicitThis": true,
        //严格的检查空值
        "strictNullChecks": true
       
    }
}


网友讨论