个人学习TypeScript笔记

简介：Ts(TypeScript)是Js(JavaScript)的超集，就是js的扩展版，js的内容ts都支持，而ts的有些内容js则不支持。就比如c++是c的超集

网页能直接运行js文件 不能直接运行ts文件，需要将ts的文件编译成js

使用npm全局安装编译器ts:npm i -g typescript

ts的文件名后缀名是.ts

在cmd相对应的目录中使用tsc xx.ts 命令 将ts文件转化成js //xx是你的ts文件名

基本语法

let 变量:类型 = 值

function fn(参数: 类型，参数: 类型 ) {}

例子

let a:number

// a的类型是number。a的值只能是数字

a = 10 // 正确

// a = 'hello' // 会报错，因为a的类型是nubmer 不能赋值字符串

如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测 (可以不用再写类型)

let c = true

c = false

// c = 123 报错， 编译器已自动将c转成boolean值 不能赋值number

function sum(a, b) {

        return a+b;

}
// 现在没写类型就没用 无法推断

console.log(sum(123, 456)) //579

console.log(sum(123, '456')) // '123456'

function sum(a:number, b:number) {

        return a+b;

}
console.log(sum(123, '456')) // 现在就会报错了

function sum(a:number, b:number) :number{ // 告诉函数返回值类型是number

        return a+b;

}

字面量,就是用来限制变量某些值中间

let a:10 

a = 10

a = 11 // 报错

let  b  = 'a' | 'c'

b = 'a'

b = 'c'

b = 'b' //报错

any 就是任意类型， 任意类型都可以,一个变量设置成any后 相当于关闭了ts的类型检测

// 不建议使用any类型

// 显式声明

let d: any



// 隐式声明

let d

d = 1

d = '1'

d = true

// unknown 表示未知类型的值

let e:unknown

e = 10

e = false

e = '10'



let s:string

s = d // 不会报错 any 可以赋值给任意类型

e = 'hello'

s = e // 报错.unknown 实际上就是个类型安全的any

类型断言 可以用来告诉解析器变量的实际类型

s =  e as string

s = <string>e;

void 用来表示空 以函数为例 就表示没有返回值

never 表示永远不会返回结果

function fn():void{

}

function fn2():never{

        throw new Error('报错了') //代码报错 立即结束

}

object

let b : {name: string, age?: number}

赋值时 name必须有 age是可选的 ?号表示属性是可选的



let c: {name: string, [propName: string] : any}

[propName: string] : any 表示任意类型的属性





let d: (a:number, b:number) => number

表示 希望d是个函数，后面是类型声明 返回值是number

d = function (n1, n2) {

        return n1 + n2

}

let e: string[],

string[] 表示字符串数组

['1', '2', '3'] 成功

['1', '2', '3', 4, 5] 报错 4和5不是字符串

let g:Array<number> 表示数值类型数组

元组

元组就是固定长度的数组

let h: [string, string]

h = ['hello', 'abc'] 成功
h = ['hello', 'abc', 123] 报错
h = ['hello', 123] 报错

enum 枚举

enum Gender{
    Male = 0,
    Female = 1
}


let i: {name:string, gender: Gender}
i = {
    name: 'wen',
    gender: Gender.Male
}

let j: string | number 
表示 string 或者number类型

let j: string & number // 错误的
&表示同时的意思

let j: {name:string} & {age: number}
表示对象既要有name也要有age

// 类型的别名

let k: 1 | 2 | 3 | 4 | 5
let i: 1 | 2 | 3 | 4 | 5

起个别名
type myType = 1 | 2 | 3 | 4 | 5;

let m:myType

---

编译选项

tsc xx.ts -w 

-w就是监视模式 实时编译

当有tsconfig.json时 直接运行tsc 会编译所有ts的文件 直接运行tsc -w 会将所有文件进入监视模式

tsconfig.json 详解

{
  // tsconfig.json 是编译器的配置文件， ts编译器可以根据他的信息来对代码进行编译
  "include": [  // include 包含 就是用来指定哪些文件需要来编译
    "./src/**/*" // **表示任意目录 *表示任意文件 
  ],
  "exclude": [ //表示的排除 在里面的文件都不编译, 默认值["node_modules", "bawer_compoents", "jspm_packages"]
    "./src/hello/*"
  ],
  // "extends": "./configs/base" //继承 用来继承配置文件 会自动包含config目录下base.json中的所有配置信息
  "files": [
    "./src/index.ts"
  ], // 指定被编译文件的列表，只有需要编译文件较少时才会用到
  "compilerOptions": { //这个是编译器的选项
    "target": "ES6", // target 用来指定ts被编译成ES版本, 默认是ES3
    "module": "ES6", //模块 指定要使用的模块化的模范
    // "lib": [] // 用来指定项目中要使用的库 比如dom 一一般不需要改
    "outDir": "./dist", // outDir 用来指定编译后文件所在的目录
    // "outFile": "./dist/app.js", // 将代码合并成一个文件 仅支持module是amd和system模块，设置outFile后，所有全局作用域会合并到同一个文件中
    "allowJs": false, // 是否对JS文件进行编译 默认是false
    "checkJs": false, // 是否检查js文件中代码符合语法规范，默认值false
    "removeComments": false, // 是否移除编译后的文件注释
    "noEmit": false, // 是否生成编译后的文件
    "noEmitOnError": false, // 当有错误时 是否生成编译后的文件
    "strict": false, // 所有严格检查的总开关 如果是true 所有的严格检查都打开
    "alwaysStrict": false, // 用来设置编译后的文件是否使用严格模式
    "noImplicitAny": true, // 不允许隐式any
    "noImplicitThis": true, // 不允许不明确类型的this
    "strictNullChecks": true, // 严格的检查空值
  }
}