1—TS优化编译
在安装好TS之后,文件中输入tsc --init 创建JSON文件即可解决,需要编译TS文件自动编译JS文件 需要启动 tsc --noEmitOnError --watch,如果不输入noEmitOnError 则就不会因为TS文件错误而自动编译JS文件
2—兼容浏览器代码 可以在配置里target设置版本–降级编译
3—配置入口源文件rootDir,输出文件outDir
4—使用any可以让改属性不用被校验
let obj:any={
x:0
}
obj.ooo() //TS文件并不会报错
5 TS类型声明
let str:string='hello types' 字符串
let num:number=100 数字
let bool:boolean=true 布尔
let arr:number[]=[1,2,3] 数组
let arr2:Array<number>=[1,2,3] 数组
function gerr(name:string):void{ //方法 void表示没有返回值,定义类型值也可以不需要,在TS中有上
console.log(name) // 下文类型 会自定义 如果确定需要定死值类型则需添加
}
gerr('222')
function pring(obj:{x:string,y:number}){
console.log(obj.x,obj.y)
}
pring({
x:'222',
y:222
})
function paarr(obj:{x:string,y?:number}){
console.log(obj.x,obj.y)
}
paarr({
x:'wwww'
})
paarr({
x:'wwww',
y:222
})
联合类型
function prindd(id:string|number){
if(typeof id == 'string'){
console.log(id.toUpperCase())
}else{
console.log(id)
}
}
prindd(123)
prindd('123')
function prinddss(id:string|string[]){
if(Array.isArray(id)){
console.log(id)
}else{
console.log(id)
}
}
prinddss('2222')
prinddss(['a','b'])
function prinddyyy(id:string|number[]){
return id.slice(0,3)
}
console.log(prinddyyy('abcde'))
console.log(prinddyyy([1,2,3]))
类型别名
type Point={
x:number,
y:string
}
function printcood(id:Point){
console.log(id.x,id.y)
}
printcood({
x:100,
y:'122'
})
type ID = number | string
function printcoodd(id:ID){
console.log(id)
}
printcoodd('123')
printcoodd(123)
type Userinput=string
function saninzz(str:string):Userinput{
return str.slice(0,2)
}
console.log(saninzz('abc'))
接口形式控制类名
interface Pointt {
x:number,
y:number
}function prindd(pt:Pointt){
}
prindd({
x:111,
y:222
})
扩展接口
interface Anin{
name:string
}
interface Bare extends Anin{
arr:number
}
const aaa: Bare={
name:'222',
arr:222
}
类型别名扩展
type Anninn={
name:string
}
type Aee = Anninn & {
hone:number
}
const bbj:Aee ={
name:'222',
hone:222
}
向同类型添加字段 -----类型别名type不能通过同名 只能通过添加&符号添加
interface MYppp {
title:string
}
interface MYppp{
count:number
}
const w:MYppp={
title:'sss',
count:222
}
类型断言
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement
const myCanvas2 = <HTMLCanvasElement>document.getElementById('main_canvas')
const x = ('hello' as unknown) as number //unknown为不知道什么类型
类型
function livv(x?:number|null){
console.log(x!.toFixed()) //x!是表示不是null undifent
}
function handrr(url:string,method:'GET' | 'POST' | 'GUESS'){
}
const req ={
url:'https://baidu.com',
method:'GET'
} as const
handrr(req.url,req.method)
6枚举
enum Directon {
up = 1,
left,
doo
}
console.log(Directon.up,Directon.left) //left会自加1 递增
7 泛型类型 —TS会自行推断
//例子1
// function firstElement<Type>(arr:Type[]):Type | undefined{
// return arr[0]
// }
// firstElement(['a','b','c'])
// firstElement([1,2,3])
// firstElement([])
//例子2 Input,Output 这两个是自行推断,随便起
function map<Input,Output>(arr:Input[],func:(arg:Input)=>Output):Output[]{
return arr.map(func)
}
const parsed = map(['1','2','3'],(n)=>parseInt(n))
function longest<Type extends {length:number}>(a:Type,b:Type){ //extends继承length这个属性 从而实现b,b拥有length这个属性
if(a.length >= b.length){
return a
}else{
return b
}
}
function longest<Type extends {length:number}>(a:Type,b:number):Type{
if(a.length >= b){
return a
}else{
let ccc :any=b
return ccc
}
}
function aaaa<Type>(arr1:Type[],arr2:Type[]):Type[]{
return arr1.concat(arr2)
}
const abb = aaaa<string | number>(['string'],[1,2,3])
8函数中的可选参数
function f (n:number = 100){ // 不传值默认传100
console.log(n.toFixed())
console.log(n.toFixed(3))
}
f(123.23)
f()
9 其他类型
void 表示没有返回值的函数的返回值
object 表示不是任何基元的值 和{} Object不一样
unknuwn 表示任何类型的值 与any相似 但是 unknuwn值做的任何事情都是不合法的
never 表示永远不会被观察到的值
Function 描述所有函数值的属性 不安全
不太常用的原语 bigInt Symbol
const one: bigint = BigInt(100) //容易丢失精度 较大值比较会出现错误 16为以上的时候
const two: bigint = BigInt(100n) //不会出现精度丢失
const one = Symbol('100') //Symbol独一无二的防止覆盖
const two = Symbol('100')
if(one == two){ //不相等
console.log('ok')
}