安装+自动编译+数据类型 --1

视频链接：https://www.bilibili.com/video/BV1Xy4y1v7S2?p=6&vd_source=f8118e07d0d604ec5c5d83ad154e403d

安装

npm install -g typescript

版本
tsc -v

手动编译ts为 js
tsc index.ts（要编译的文件）每次改动ts文件都要对当前文件进行编译

自动监听ts文件的更改
tsc xxx.ts -w 但是只能监听当前监听的ts文件，需要开多个监视的cmd窗口

通过tsc的配置文件自动编译方法：##

tsc --init 按enter 生成tsconfig.json
在tsconfig.json中改写js输出路径，"outDir": "./js",
终端=》运行任务=》监听tsconfig.json 或者在端口中 执行 tsc命令
tsc 是 编译当前目录下 所有的 ts文件，但是如果有tsconfig.json 文件中include

tsconfig.json 是ts编译器的配置文件，各个配置项的含义
"include" 用来指定哪些ts文件需要编译
路径中一个表示任意文件，两个表示任意目录
"include":[
"./src//"
]
一般不用设置exclude，像["node_modules","bower_components","jspm_packages"] 这些文件夹内的本身就不编译
"exclude": [
"./src/hello/xx/x" //hello下的ts文件不需编译
],
"extends" 配置继承
"files":[] 设置要变异的文件数组，include设置的是目录
/*
compilerOptions 针对编辑器的选项
*/
关于compilerOptions中的子选项：
"target": 用来指定ts被编译的js版本，默认转成es3版本的js ,esnext指的最新版本的es
"target":"es2015" es2015是ES6
"module"：指定要使用的模块化的规范
"module"："es6"
"module"："commonjs"
想知道有哪些选项，输入一个错误的值，会提示
"lib":[] //用来指定项目中要使用的库 一般情况不需要改，默认有使用dom库，如果设置[]，就相当于没有使用任何库
"outDir":"./dist",// 用来指定编译后文件所在的目录
"outFile":"./dist/app.js",//将代码合并为一个文件
"allowJs": false // 是否对我们的js进行编译，默认是不编译false
"checkJs": false //是否检查js代码是否符合语法规范 ，是以ts的语法规范检查js语法，默认是false
"removeComments":false，// 是否移除注释，默认false
"noEmit": true, // 不生成编译后的文件，针对于只需要ts的编译语法校验，不需要生成js文件时候使用
"noEmitOnError":false, // 当有错误的时候，是否生成编译文件。正常情况下ts编译报错，不影响生成js文件。为true，代码中有编译错误，不生成js文件

与ts编译语法相关的选项
"alwaysStrict":false ,是否编译后的js使用严格模式。默认false，不使用。当代码中有import 或者export 的时候，会自动进入严格模式，打包生成的js文件上面没有"use strict" 的字符串
"noImplicitAny": true // 不允许隐式的any。尽量不要使用显式的any类型，更不能使用隐式的any类型 var a = function(a,b){return a+b} 函数以及参数都式隐式的any类型
"noImplicitThis": true // 不允许不明确类型的this
function fn(){ alert(this) }
这里的this就式不明确类型的this
function fn(this:Window){alert(this)}
"strictNullChecks":true // 严格检查空值 如果获取dom为null,就会被检查出来
let box1 = document.getElementById('box1');
box1?.addEventListener('click',function(){}) // 如果有box1，绑定方法
"strict":false // 所有严格检查的总开关。建议设置为true。写在所有严格检查的上面，【alwaysStrict、noImplicitAny、noImplicitThis、strictNullChecks】这些都开启了。某个特殊再单独写

如果报错# [无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1，因为在此系统上禁止运行脚本]

在开始搜索
image.png

输入命令

set-ExecutionPolicy RemoteSigned


image.png

再次监听ok

数据类型##

image.png

增加了类型校验
布尔类型boolean
let boo: boolean = false
数字类型number （包含整型和浮点型）
let num: number = 1
字符串类型string
let str: string = 'aaa'
数组类型array
let arr01:number[]=[1,2,4]
let arr02:string[]=['a','b']
let arr03:Array<number>=[1,2,3]
**undefined 和 null 类型
let _undefined: undefined = undefined
let _null: null = null
**ts中的或
let some_var: number | string | boolean = 123

元组类型tuple（数组类型的一种）长度固定
let arr:[string,number,boolean]=['stt',22,false];
枚举类型enum enum后面是空格
enum json01{success=1,error=2};
let mm:json01=json01.success;
console.log(mm)
enum json02{red,blue};//不赋值，默认索引值
enum json03{red,blue=5,gold};//gold为6
任意类型any
不新进行类型校验，使用ts时，不建议使用any类型，如果定义变量，但不赋值，不设置就是any
用途：在设置object类型的时候使用。
null 和 undefined 是never类型的子类型
let mm:number
会报错
let mm:undefined
不会报错
let xs:number|undefined;
xs=123
console.log(xs)//赋值是新值不赋值是undefined

void类型一般函数没有返回值就用void
function fn():void{
不写return
return
return undefined
return null
}
上述4种都可以
函数如果有返回值，根据返回值设定函数类型
function fn():number{
console.log('bbb')
return 1666
}
never类型 其他类型 用于抛出异常，该函数连undefined都没有
funciton fn():never{
throw new Error('报错了')；
}
**对象 使用interface，接口名用I 开头表示接口名
interface IPerson {
name: string；
age: number
}
let obj: IPerson = {
name: '张珊'，
age: 10
}
定义可选项的接口 加？
interface IPerson2 {
name?: string；
age?: number
}
let obj: IPerson2 = {}
** 接口的继承
interface IA extends IPerson {
hobby:Array<string>
}
let p1: IA = {
name: '李四'，
age: 2,
hobby: ['a']
}
** 继承多个
interface IB {
name: string
}
interface IC {
age: number
}
interface ID extends IB,IC {
sex: string
}
let p3: ID = {
name: '张珊',
age:10,
sex:'男'
}
** ts 中的 与 &
let p4: IB & IC & ID = {
name: '张珊',
age:10,
sex:'男'
}
** 对象中不确定的属性
[propName:string]:any
interface IPerson3 {
[propName:string]:any
}
let p5:IPerson3 = {}
let p6:IPerson3 = {
name: '张三'
}
** implements 类进行接口的实现
interface IPerson4{
name: string;
age: number;
getName(): string;
getAge:()=> number
}
class Person implements IPerson4 {
name: string = '张三';
age: number; // 可以不写默认值
getName(): string {
return this.name
}
getAge(): number {
return this.age
}
// 以上接口的东西必须都有，另外可以写自己的东西
sayHello(): void {
}
}
** 类型断言
function getLength(str: number | string): number{
// if(typeof str === 'string'){ js中如此判断 ts进行断言
if((str as string).length){
// return (str as string).length
return (<string>str).length
}else{
return str.toString().length
}
}
** 非空断言
function fn3(arg?:string):number{
return arg.length
}
fn3() //当我不传的时候报错
function fn3(arg?:string):number{
return arg!.length
}
// ! 相当于 return arg && arg.length
** 枚举
enum Color {
red,
green,
yellow
}
Color.red //0 属性值 默认按照索引0自增
Color.green //1
Color.yellow //2
包含反向映射关系
Color[0] //red
Color[1] //green
Color[2] //yellow
给枚举赋值
enum Color2 {
red = 2,
green, // 3 //从前一个递增
yellow // 4
}
enum Color2 {
red , // 0
green = 2,
yellow // 3
}
enum Color3 {
red , // 0
green = 'abc',
yellow = 3 // 如果前一个枚举是字符串，后一个枚举属性必须赋值，不能自增
}
** 泛型
function fn<T>(arg:T):void{}
fn<number>(12)

定义类型后，不可以改变类型

demo
//先定义后赋值
let a:number
a = 12
//定义和赋值同时进行，ts会自行判断类型，不需要再指定类型了
//通常定义类型是针对函数中的参数，
//函数名括号后面的:number 是函数返回值的类型
function sum(a:number, b:number):number{
return a+b
}
红色波浪线是错误
即使ts写错，也能编译成js

//通过| 定义2种数据类型（联合类型）
let c:boolean | string

unknow类型（如果不知道类型，建议用unknow）
将unknow类型的值不能给其他类型的值赋值
any类型的值赋值给其他类型的值，其他类型的值也污染了

类型断言
s = e as string 或者 s = <string>e

let a:object; //开发时候不用，因为多种数据类型都属于对象
let b:{name:string，age?:nmber} //实际应用 可选属性是?
let c:{name:string, [propName:string]:any} //对象c中必须有name，其他属性不管

let d:(a:number, b:number)=>number;//定义函数的格式
d = function(n1:number, n2:number):number{
return n1+n2
}

第一种定义数组内每项类型写法
// string[] 表示字符串数组
// number[] 表示数值数组
let e:string[]
第二种定义数组内每项类型写法
let f:Array<number>

元组，就是固定长度的数组
let h:[string,string]

枚举 enum
enum Gender{
Male = 0,
Female = 1
}
let i:{ name: string, gender: Gender};
i = {
name:'孙悟空'，
gender: Gender.Male
}

&
let j:{ name: string } & { age: number };
j = {name: '孙悟空'， age: 18}

给类型设置别名，把多次用到的 归一类
type myType = 1 | 2 | 3 | 4 | 5;
let k:myType
let l:myType

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,809评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,189评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 167,290评论 0赞 359
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,399评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,425评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,116评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,710评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,629评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,155评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,261评论 3赞 339
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,399评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,068评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,758评论 3赞 332
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,252评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,381评论 1赞 271
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,747评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,402评论 2赞 358