TypeScript 语法

这篇具有很好参考价值的文章主要介绍了TypeScript 语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

环境搭建

以javascript为基础构建的语言,一个js的超集,可以在任何支持js的平台中执行,ts扩展了js并且添加了类型,但是ts不能被js解析器直接执行,需要编译器编译为js文件,然后引入到 html 页面使用。

ts增加了数据类型,支持es的新特性,添加了es不具备的新特性,丰富的配置选项,还有强大的开发工具。

全局安装ts(需要node环境), 安装后 tsc 指令可以查看是否安装成功

npm i -g typescript

tsc xxx.ts  //编译ts文件为js

TypeScript 语法,我的笔记,typescript,前端

 基本类型

需要类型声明,指定ts中变量的类型,指定类型后,当变量赋值时,ts会自动检查值是否符合声明的类型,否则就报错。如果变量的声明和赋值是同时进行的,ts可以自动对变量进行类型检测;除了声明变量,也可添加类型给函数参数,对于返回的结果也可以设置类型。

let a = true //如果变量的声明和赋值是同时进行的,ts可以自动对变量进行类型检测。

let b:number;

function sum(a:number,b:number):number{
    return a+b;
}
类型 例子 描述
number 1,-33,2.5 任意数字
string 'hi' 任意字符串
boolean true/false 布尔值
字面量 其本身 (let a:10,a的值只能是10,很少这么用) 限制变量的值就是该字面量的值
any * 任意类型(相当于关闭了类型检测)
unknown * 类型安全的any
void 空值(undefined) 没有值(或undefined)
never 没有值 不能是任何值
object {name:'张三'} 任意的js对象
array [1,2,3] 任意js数组
tuple [4,5,'123'] 元祖,ts新增类型,固定长度数组
enum enum{A,B} 枚举,ts新增类型
number类型
let a:number = 6
string类型
let str:string = "hello!"
boolean类型
let str:boolean = true
字面量 类型
let a:10
a = 10 //a只能为10

let b:'male'|'female' //b只能是 'male' 或者 'female'(联合类型) 其他值会报错
b = 'male'
b = 'female'

let c:boolean|string //c可以是布尔类型或者字符串类型
c = true
c = 'hello'
any类型

可以是任意类型,相当于对该变量关闭了ts类型检测,不设置指定类型,默认为any类型,但是any类型的值可以赋值给任意变量,不报错,会影响其他变量类型。少用,一般多用unknown

let d:any; //可以是任意类型,相当于对该变量关闭了ts类型检测
d = 'hello'
d = 123
d = true

let e; //不设置指定类型,默认为any类型
unknown类型

未知类型,用法与any一致,但是不同的类型依旧不可以赋值。实际上就是一个安全类型的any,不能直接赋值给其他,可以采用类型断言的方式赋值。告诉解析器变量的实际类型。

let e:unknown;
e = 'hello'

let s:string 
s = e //此时报错,因为e不是string类型

//类型断言,两种方式都可以
s = e as string 
s = <string>e
void类型

主要用于函数的无返回值,表示函数无返回值

function fn():void{
    
}
never类型

表示永远不会返回结果,比如调用下方的方法就会报错,代码执行立即结束,则没有返回值了

function fn():never{
    throw new Error('报错了')
}
 objec类型

比较鸡肋,万物皆是对象,可以是 {} ,可以是 function,也可以是[ ] 。

let a:object;
a = {}
a = function (){}

//b是对象类型,并且要有一个name属性,age属性可有可无,再添加属性就会报错
let b:{name:string,age?:number};


//任意字符串的属性名,对应的值为any任意类型,可以写多个属性,但是一定要有name属性
let c = {name:string,[propName:string]:any}
c = {name:'hello'age:18,gender:'男'}


let d:(a:number,b:number)=>number //
d = function (a:number,b:number):number{
    return a + b
}
Array类型
let e:string[]; //表示字符串数组
e = ['a','b']

let f:number[]; //数字数组,

let g:Array<number>; // 数字数组,与上方的意义相同
g = [1,2,3,4]

元组类型

固定长度的数组,严格需要个数一致。

let h:[string,number]
h = ['abe',123]
enum 枚举
enum Gender{
    male = 0
    female = 1
}
let i:{name:string,gender:Gender }
i = {
    name:'hello',
    gender:Gender.male
}
& 表示同时
let j:{name:string} & {age:number};
j = {
    name:'hello',
    age:18
}
类型别名
type  myType = 1|2|3
let m:myType //起了别名

编译选项

自动编译文件

使用-w指令,ts会监听文件变化,并在变化时对文件重新编译。

tsc xxx.ts -w
自动编译整个项目

 需要配置tsconfig.json文件,添加配置文件后,执行 tsc 指令,可以完成对整个项目的编译

tsc -w 指令监听并编译整个项目文件 可以直接使用命令行来初始化配置文件

tsc -init
配置选项
include

用来指定哪些ts文件需要被编译

{
    "include":[
        "./src/**/*" //src文件夹下所有文件 **表示任意目录,*表示任意文件
    ]
}
exclude

用来指定哪些ts文件不需要被编译,默认值:["node_modules",'browser_components','jspm_packages'],也可以不配置。

{
    "exclude": [
        "./src/hello/**/*"
    ],
}
extends

定义被继承的配置文件,另一个配置文件的配置选项和 tsconfig.json 一致。

{
    "extends":"./config.json",
}
files

指定被编译文件的列表,只有需要变异的文件少时才会用到。类似于include,这个仅限于文件。

{
    "files": [
        "./src/01.ts"
    ]
}
compilerOptions 编译选项
target

指定ts被编译为ES的版本,默认是 ES3

//可取值为:'es3', 'es5','es6', 'es2015','es2016','es2017', 'es2018','es2019','es2020','es2021',‘es2022','esnext'
{
    "compilerOptions": {
        "target":"ES3"
    }
}
module

指定要使用的模块化的规范

//取值 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'

{
    "compilerOptions": {
        "module": "es6"
    }
}
lib

用来指定项目中要使用的第三方的库,是一个数组,但是一般情况下我们不会去改。

//可取值 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'es2023', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2019.intl', 'es2020.bigint', 'es2020.date', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2020.number', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'es2021.intl', 'es2022.array', 'es2022.error', 'es2022.intl', 'es2022.object', 'es2022.sharedmemory', 'es2022.string', 'es2022.regexp', 'es2023.array', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref', 'decorators', 'decorators.legacy'

{
    "compilerOptions": {
        // "lib": ["es6"]
    }
}
outDir

指定编译后的文件所在的路径,默认编译是和原ts文件在同一目录下。

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}
outFile

指定将ts代码编译后合并为一个js文件(默认合并的是全局作用域中的代码),如果涉及到模块化(export / import)会报错,需要更改 module 为 amd 或者是 system,一般不常用。

{
    "compilerOptions": {
        "outFile": "./dist/app.js"
    }
}
allowJs

是否对js文件进行编译,默认是false

{
    "compilerOptions": {
        "allowJs": false
    }
}
checkJs

检查js代码是否符合语法规范,默认是false

{
    "compilerOptions": {
        "checkJs": false
    }
}
 removeComments

是否移除编译后js中的注释。

{
    "compilerOptions": {
        "removeComments": true
    }
}
 noEmit

是否生成编译后的文件,默认为false

{
    "compilerOptions": {
        "noEmit": false,
    }
}
noEmitOnError

当有错误的时候,不生成编译文件,默认为false

{
    "compilerOptions": {
        "noEmitOnError": false,
    }
}
 alwaysStrict

设置编译后的文件是否使用严格模式,默认为false

{
    "compilerOptions": {
        "alwaysStrict": false,
    }
}
 noImplicitAny

不允许 ts 中隐式 any 的类型出现,比如忘记给函数形参指定数据类型

{
    "compilerOptions": {
        "alwaysStrict": true,
    }
}
 noImplicitThis

不允许不明确类型的 this,默认值false

{
    "compilerOptions": {
        "noImplicitThis": true,
    }
}
 strictNullChecks

严格检查空值 null 并且报错,默认值为false

{
    "compilerOptions": {
        "strictNullChecks": true,
    }
}

 其余配置选项参考:tsconfig.json · TypeScript中文网 · TypeScript——JavaScript的超集

 


使用webpack来配置ts的打包编译

npm init
npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin clean-webpack-plugin webpack-dev-server

webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    //指定入口文件
    entry: "./src/index.ts",
    //指定打包文件的所在目录
    output: {
        //指定打包文件目录
        path: path.resolve(__dirname, 'dist'),
        //打包后文件名称
        filename: "bunndle.js",
        clean: true,
        environment:{
            arrowFunction:false
        }
    },
    module: {
        rules: [
            //指定ts文件的loader
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [["@babel/preset-env", {
                                targets: { "chrome": "88","ie":"11"},
                                "corejs": "3",
                                "useBuiltIns": "usage"
                            }]]
                        }
                    },

                ],
                //要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: "./public/index.html"
        }),
        new CleanWebpackPlugin()
    ],
    resolve: {
        extensions: [".ts", ".js"]
    },
    mode: "production"
}
//tsconfig.json

{
    "compilerOptions":{
        "module": "es2015",
        "target": "es2015",
        "strict": true
    }
}
//package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe "
  },

Class类的一点总结

super函数调用:当子类继承父类后,有了自己的构造函数,那么相当于父类的构造函数被重写,那么将不会调用父类的构造函数会报错,此时需要调用super函数来执行父类的构造函数。

abstact类:当一个类只用于继承时,那么使用抽象类,且不能用来创建对象,抽象父类的公共方法,需要子类必须重写抽象方法,不用写函数体,抽象方法只能写在抽象类中。

abstract class Parent{
    abstract test():void;
}

class Child extends Parent{
    constructor(){
        super()
    }

    test(){
        console.log('test')
    }

}

接口interface

用来定义一个类的结构,应该包含哪些属性和方法,同时也可以当做是类型声明,但是接口可以重复定义,最终是将相同接口的内容合并在一起。

接口可以在定义类的时候去限制类的结构,接口内的所有属性不能有实际的值,方法也是抽象方法,可以看做是一个抽象类,通过  implements 进行实现。

interface myInterface{
    name:string;
    age:number;
    test():void;
}

const obj:myInterface = {
    name:'sss',
    age:111
    
}


class Test implements myInterface{
    name:string,
    construcror(name:string){
        this.name = name
    }
    test(){}
}

属性修饰符

public:修饰的属性可以在任意位置访问修改。

private:私有属性,只能在类内部修改,如果要修改private属性可以添加 getter setter 的方法,外部可以直接通过 . 的方式进行访问和修改属性。

class Test implements myInterface{
    private _name:string
    pivate _age:number

   get name(){
     return this._name
   }

   set name(value){
     this._name = value
   }
}

let test = new Test()
let name = test.name

protected:受保护的属性,只能在当前的类和子类中(内部)访问,外部不能访问。

泛型

在定义函数或类时,如果遇到类型不明确就可以使用泛型,泛型可以同时指定多个,

function fn<T>(a:T):T{
    return a
}
let a = fn(10) //不指定类型,ts会自动对类型进行推断,此时T为number
let str = fn<string> ('hello') // 指定泛型


function fn2<T,K>(a:T,b:K):T{
    return a
}
let num = fn2<number,string>(123,'hello')


interface Inter{
    length:number
}
function fn3<T extends Inter>(a:T):number{ //继承Inter接口,是Inter的子类
    return a.length
}
fne({length:10})

class MyClass<T>{
    name:T;
    constructor(name:T){
        this.name = name
    }
}
const mc = new MyClass<string>('jerry')

其他参考文档:文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集文章来源地址https://www.toymoban.com/news/detail-656432.html

到了这里,关于TypeScript 语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • TypeScript 基础语法

    1、基元类型 类型 例子 描述 number 1, -33, 2.5 任意数字 string ‘hi’, “hi”, `hi` 任意字符串 boolean true、false 布尔值true或false null 值只能为null undefined 值只能为undefined 字面量 其本身(详见 面向对象 15泛型) 限制变量的值就是该字面量的值 any * 任意类型 unknown * 类型安全的any,un

    2024年02月04日
    浏览(32)
  • 【TypeScript】进阶之路语法细节,类型和函数

    类型别名(type)的使用 为解决给联合类型的类型定义过长的问题 使用类型别名 接口(interface)的声明的使用 使用interface声明 相比较类型别名,少了= 二者区别: 类型别名和接口声明非常相似,在定义对象的时候,可以任意选择使用 主要区别: type类型使用范围更广 type定

    2024年02月13日
    浏览(49)
  • TypeScript教程(二)基础语法与基础类型

    TypeScript由以下几个部分组成 1.模块 2.函数 3.变量 4.语句和表达式 5.注释 示例: Runoob.ts 文件代码: 以上代码首先通过  tsc  命令编译: Runoob.js 文件代码:  最后我们使用 node 命令来执行该 js 代码。 tsc 常用编译参数如下表所示: 序号 编译参数说明 1. --help 显示帮助信息

    2024年02月12日
    浏览(43)
  • TypeScript 项目 Airbnb 语法风格 ESLint 配置

    安装: 配置: .eslintrc.js: tsconfig.json: 错误: 注意: webstorm 上修改完 tsconfig.json 的 include 属性的值,需要重启才会生效 eslint-config-airbnb-typescript Solve parserOptions.project bug with Typescript and ESLint

    2024年02月01日
    浏览(55)
  • 《前端面试题》- TypeScript - TypeScript的优/缺点

    简述TypeScript的优/缺点 优点 增强了代码的可读性和可维护性 包容性,js可以直接改成ts,ts编译报错也可以生成js文件,兼容第三方库,即使不是ts编写的 社区活跃,完全支持es6 缺点 增加学习成本 增加开发成本,因为增加了类型定义 需要编译,类型检查会增加编译时长,语

    2024年04月23日
    浏览(41)
  • ...args: any[] TypeScript 中的剩余参数语法

    ...args: any[] 是 TypeScript 中的剩余参数语法,也称为剩余参数(Rest Parameters)。 在函数参数列表中, ...args 表示将剩余的参数收集到一个数组中,这个数组的类型是 any[] ,即任意类型的数组。 例如: 在调用 foo 函数时,你可以传递任意数量的参数: 在函数内部, args 是一个包

    2024年02月09日
    浏览(37)
  • TypeScript快速上手语法+结合vue3用法

            前言:             本篇内容不涉及TypeScript安装以及配置,具体安装及配置篇可以看下面目录,本篇只涉及TypeScript语法相关内容,及结合vue3的用法。不讲废话,简单直接直接开撸。 目录      TypeScript的具体安装及配置  TypeScript快速上手语法+结合vue3用法 1、

    2024年02月03日
    浏览(37)
  • 前端-TypeScript

    声明:我是一个后端的开发,只是比较感兴趣这个,如果有错误的地方请指正,但是不要喷我。 1.什么是TypeScript,即什么是TS 解释TS:可以理解为是JS的升级版本,众所众知,JS不像Java语言有类型的定义,所以编译器或者在编译的时候是没办法知道定义的类型是什么,是可以

    2024年02月12日
    浏览(38)
  • web前端-TypeScript学习

    TypeScript 是什么? TypeScript(简称:TS)是JavaScript的 超集(JS有的TS都有) 。 TypeScript = Type +JavaScript(在JS基础之上,为JS添加了 类型支持 )。 TypeScript是微软开发的开源编程语言,可以在任何运行JavaScript的地方运行。 TypeScript为什么要为JS添加类型支持? 背景: JS的类型系统存在”

    2024年02月09日
    浏览(39)
  • 前端vue3+typescript架构

    1、vue creat 项目名称 选择自定义  选择需要的依赖  选择vue3  一路enter,选择eslist+prettier  继续enter,等待安装 按步骤操作,项目启动成功  2、vscode安装5款插件  2、代码保存自动格式化,保证每个开发人员代码一致,根目录新建三个文件.editorconfig和.prettierrc和.prettierignore

    2024年02月11日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包