ts入门知识

387 阅读2分钟

这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战

TS初识

  • ts文件不能被浏览器运行,要用tsc + *.ts 先编译成js文件

  • 每次修改ts文件后都需要重新编译成js文件,很麻烦,所以可以自己配置

    1. tsc --init 生成.json文件
    2. 打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,请复制下列配置)
    {
    "compilerOptions": {
     "target": "es5",
     "noImplicitAny": false,
     "module": "amd",
     "removeComments": false,
     "sourceMap": false,
     "outDir": "js"//你要生成js的目录
        }
     }
    
  • 终端=>运行任务=> ts:watch

我们为什么需要TS

  1. 支持面向对象的编程特性,比如类、接口
  2. 在编译时提供了错误检查功能。它将编译代码,如果发现任何错误,它将在运行脚本之前突出显示这些错误。
  3. 支持最新的JavaScript特性,包括ECMAScript 2015

TS数据定义

JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。

原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol

原始数据

原始类型的定义都是

let isDone:boolean = false;
let num:number = 12.6;
let str:string = '444';

let isDone:Boolean = new Boolean(1); 注意,使用构造函数 Boolean 创造的对象不是布尔值:。事实上,使用 new Boolean() 返回的是一个 Boolean 对象。在 TypeScript 中,boolean 是 JavaScript 中的基本类型,而 Boolean 是 JavaScript 中的构造函数。其他基本类型(除了 null 和 undefined)一样,不再赘述。

数组

方法一:

  • let arr:number[] = [4,5,6];

  • 定义数组要指定类型:
    let arr1:string[] = ['4']

方法二:泛型

  • let arr2:Array<string|number|any> = ['4']

枚举

一般用于简单表示某一状态,比如1表示success,0表示failed

名字一般用大写开头

enum Flag {success=1,failed=0};
var f :Flag = Flag.success; // 1

这样就可以用可标识的数值来表示某个状态,以免你忘记到底是什么来表示success,什么表示failed,直接把它存入success、failed即可。 这就是枚举类型的基本用途

enum Color {'red','blue'} // red=>0 blue=>1
如果不赋值的话默认是索引值

any类型

任意类型,比如可以把dom节点设置为any
let oBox:any = document.getElementById('box')

函数定义

函数可以给返回值定义类型

  • 当没有返回值时,要定义为void
function fun():void{
    console.log(1);
    
}
  • 有返回值时,定义为相应类型即可
function fun():number{
    return 123
}

never类型(很少用)

其他类型,即不在上面类型里面(包括null和undefined)的子类型,代表从不会出现的值; 也就是声明never的变量只能被never类型所赋值

let f:never;
f = (()=>{
    throw new Error('err')
    
})();