TypeScript-学习记录

 RorinL     2021年07月22日 星期四 15:38:42     JavaScript      JavaScript   typescript   框架    

简述

ts是一个基于js开发的语言,是Js的超集;兼容js语法

增加了类型,接口的概念,是一种编译时强类型,编译后弱类型的语言;

?开始使用

1.node一定先安装的;然后

npm i -g typescript

2.新建ts文件hellots.ts

3.编译ts文件

tsc hellots.ts
一个ts编译后的文件-js文件

如上图所示,目录下生成了他的js文件;

?类型使用&声明

ts的类型基本包括了js的类型

ts的类型:number,string,object,array,tuple[元组],function,any[任意类型]

类型的使用

1.number

let a = 12; //直接使用,ts编译器自动识别a就是number


//let b: number = 12;
//let b: number;
//b = "po";

2.object

//1.声明一个对象[有限属性]
let a: object;
a = {};
a = function(){}


//以上都可以声明对象,但是js万物皆对象;所以经常用下面的方法声明对象
let a: {};
//属性后加?标识赋值时候变量可有可无;没有?属性有多少就要多少少一个都不行
let b: {name: string,age?: number}


//2.声明一个对象[多属性可选]
let a: {name: string,[xxx: string]: any}; //name不要也可以,这里是例子;
//[xxx: string]: any
//xxx代表属性名,string表示属性名类型;any表示该属性名类型的值是任意类

3.function

//赋予变量a=方法. 参数aa,bb都是number,返回值也是number;
let a: (aa: number,bb: number)=>number


//直接声明方法. 返回类型直接在方法后面加类型声明
function sum(a: number,b: number): number{
  return a + b;
}

4.array

let a: string[]; //字符串类型数组
let a: number[]; //数值型数组
let a: Array<number>; //同上

5.tuple

就是固定长度的数组

let a: [number,number];

6.enum枚举类型

//Male属性可以自动分配也可自己定义,如Male = 0
enum Gender{
  Male,Female
}
let i: {name: string,gender: Gender};
i = {
  name: 'lisi',
  gender: Gender.Male
}

类型别名

type mstrtype = string;

这时可以

let a: mstrtypr;
a = "haha";

?文件编译选项

配置信息[基本

{
  include: ["./src/**/*"], //希望被编译的文件的路径,**表示任意目录,*表示任意文件
  allowJs: false, //默认值,是否把js文件也编译
  checkJs: false, //默认值,是否检查js语法合符规范[都是js文件,ts肯定会检查这个不用说]
  outDir: "", //被编译后生成的js文件存放的目录"/xx"
  outFile: "", //将ts全局作用域中的代码编译成一个文件,路径+文件名【一般不用配置,可用webpack打包】
  exclude: [], //不希望被编译的ts文件的路径
  compilerOptions: {
    target: "ES6", //期望编译后ES的版本
    module: "ES6", //模块化的规范,即import第三方模块,编译后的规范语法(写法)
    lib: ["dom"], //项目使用的库,如dom,es5;[不用配置,一般默认就可]
  },
  removeComments: false, //默认值false,编译是否移除注释
  noEmit: false, //默认值false,编译后不生成js文件
  noEmitOnError: false, //默认值false,编译时遇到错误才不生成js文件
  alwaysStrict: false, //默认值false,编译的js文件是否使用严格模式"use strict"
}

1.实时更新编译[需多开]

-w: watch代表监听ts文件内容

ts hellots.ts -w

2.实时更新自动编译[推荐]

目录下新建tsconfig.json->命令行执行tsc[编译所有];执行tsc -w:这时候才是实时编译

我的学习文档-https://shimo.im/docs/wwchjYRGR8xjjytC/ 「Typescript」,可复制链接后用石墨文档 App 或小程序打开


暂无评论

发表回复

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...