【TypeScript】本篇文章带你速通TypeScript，了解TS与JS的关系，TS如何定义类型、接口、枚举...

let s = "hello"
s() // 报错：TypeError: s is not a function

const str = Date.now() % 2 ? '奇数' : '偶数'

if(str!=='奇数'){
    alert('hello')
}else if (str==='偶数'){
    alert('world')
}

const obj = { width: 10, height: 15};
const area = obj.width * obj.heighth;

const message = 'hello, world';
message.toUperCase();// 正确的方法名称：.toUpperCase();

tsc ts文件名

var a = 10;
console.log("数字是："+a)

var a = 10;
console.log("数字是：" + a);

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
    // "rewriteRelativeImportExtensions": true,          /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
    // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
    // "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
    // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "strictBuiltinIteratorReturn": true,              /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

let a: string
let b: number
let c: boolean

a = 'hello'
b = 100
c = true
console.log(a,b,c)// hello 100 true

function count(x:number,y:number){
    return x+y
}
let result = count(1,2)
console.log(result)// 3

function count(x:number,y:number):string{
    return x+y+"数量"
}
let result = count(1,2)
console.log(result)

let a: string
let b: 'test'

a = 'hello'
b = 'name'

let d = -99
d = false // 报错

let d: number = -99
d = false // 报错

let a: string = 'a'; // TS更加推荐这种
let b = new String('b');// String是一个包装类
let c: String = 'c';// 使用的包装类，不推荐；更加占用资源

let a: any
a = 100
a = "你好"
a = false

// 如果不加任何的类型限定，默认就是 【any】类型
let b
b = 100
b = "你好"
b = false

let a: any
a = false

let c: string
c = a

let a: unknown
a = 100
a = "你好"
a = false

let c: string
c = a // 警告，不能将类型“unknwon”分配给类型“string”

let a: unknown
a = 100
a = false
a = "你好"

let c: string

// 判断
if(typeof a === 'string'){
    c = a
}

let a: unknown
a = 100
a = false
a = "你好"

let c: string
c = a as string // 断言
c = <string> a // 断言

let str1: string
str1 = 'hello'
str1.toUpperCase() // 无警告

let str2: any
str2 = 'hello'
str2.toUpperCase() // 无警告

let str3: unknown
str3 = 'hello'
str3.toUpperCase() // 警告：“str3”的类型为“未知”

let a: never

a = 1
a = true
a = undefined
a = null

let a: string

a = 'hello'
if(typeof a==='string'){
    console.log(a.toLowerCase())
}else{
    // 这里推断出来时 never，因为没有任何一个值会符合此处的逻辑
    console.log(a)
}

function throwError(str: string):never{
    throw new Error("程序异常退出："+str)
}

function logMessage(msg: string):void{
    console.log(msg)
}
logMessage('hello');

function logMessage1(msg: string):void{
    console.log(msg)
}
function logMessage2(msg: string):void{
    console.log(msg)
    return
}
function logMessage3(msg: string):void{
    console.log(msg)
    return undefined
}

////////////////////////////////void///////////////////////////////////
function logMessage4(msg: string):void{
    console.log(msg)
}
let s1 = logMessage4("hello")
if(s1){ // 警告：无法测试 "void" 类型的表达式的真实性
    console.log("logMessage4");
}
////////////////////////////////undefined///////////////////////////////////
function logMessage5(msg: string):undefined{
    console.log(msg)
}
let s = logMessage5("hello")
if(s){
    console.log("logMessage5");
}

let a:object

a = {}
a={name:"张三"}
a=[1,2,3,4,5]
a=function(){}
a=new String("12")
class Person{}
a = new Person()

/////////////// 无法使用 ////////////////
a = 1
a = false
a = "hello"
a = null
a = undefined

let a:Object

a = {}
a={name:"张三"}
a=[1,2,3,4,5]
a=function(){}
a=new String("12")
class Person{}
a = new Person()
a = 1
a = false
a = "hello"

/////////////// 无法使用 ////////////////
a = null
a = undefined

let person1: {name: string,age:number}
person1 = {name: "zhangsan",age: 18}

////////// 两种：带或不带 ? ///////////////
let person2: {name: string,age?:number}
person2 = {name: "zhangsan"}

let person3: {
    name: string,
    age?: number,
    // 索引签名
    [key:string]:any
}

person3 = {name:"zhangsan",age:18,address:"湖南"}

let count: (a:number,b:number) => string // 规定了函数的数据类型，参数类型是number，返回值类型是string类型

count = (x,y)=>{
    return x+y+"字符串"
}

 let arr1: string[] // 规定了类型：数组内的每一项必须是字符串
 let arr2: Array<string>
 
 arr1 = ["a","b","c"]
 arr2 = ['hello','world']

let arr1: [string,number]
let arr2: [number,boolean?]
let arr3: [number,...string[]]

arr1 = ["hello",1]
arr2 = [100,false]
arr2 = [20]
arr3 = [100,"hello","world"]
arr3 = [100]

function walk(str:string){
    if(str === 'up'){
        console.log("上");
    }else if(str === 'down'){
        console.log("下");
    }else if(str === 'right'){
        console.log("右");
    }else if(str === 'left'){
        console.log("左");
    }else{
        console.log("未知");
    }
}

walk("up")
walk("down")
walk("right")
walk("left")

enum Direction{
    UP,
    DOWN,
    LEFT,
    RIGHT
}
console.log(Direction)
/*
{
    "0": "UP",
    "1": "DOWN",
    "2": "LEFT",
    "3": "RIGHT",
    "UP": 0,
    "DOWN": 1,
    "LEFT": 2,
    "RIGHT": 3
}
*/
console.log(Direction.UP);// 0
console.log(Direction[0]);// UP

// 报错代码：
Direction.UP = 1 // 枚举中的值是只读的

function walk(data:Direction){
    if(data === Direction.UP){
        console.log("上");
    }else if(data === Direction.DOWN){
        console.log("下");
    }else if(data === Direction.RIGHT){
        console.log("右");
    }else if(data === Direction.LEFT){
        console.log("左");
    }else{
        console.log("未知");
    }
}

walk(Direction.UP)
walk(Direction.DOWN)
walk(Direction.RIGHT)
walk(Direction.LEFT)

enum Direction1{
    UP1 = "UP",
    DOWN1 = "DOWN",
    LEFT1 = "LEFT",
    RIGHT1 = "RIGHT"
}


/*
{
    "UP": "UP",
    "DOWN": "DOWN",
    "LEFT": "LEFT",
    "RIGHT": "RIGHT"
}
*/
console.log(Direction1)

let dir: Direction1 = Direction1.UP1
console.log(dir) // 输出：“UP”

type num = number
let price: num
price = 100

type Area = {
    height: number;
    width: number;
}
type Address = {
    num: number;
    cell: number;
    room: string;
}

// 代表test类型，只能是Area类型或者Address类型其中一种
type test = Area | Address
// 代表House类型，必须包含Area和Address两种类型
type House = Area & Address
let x: House = {
    height: 100,
    width: 20,
    num: 1,
    cell: 123,
    room: "008"
}

type LogFunc = () => void

const f1:LogFunc = function(){
    return 66 // ？void不是只能接受返回undefined吗，怎么这里返回number类型不报错
}

class Person{
    name: string;
    age: number;
    // 基本构造函数
    constructor(name: string,age: number){
        this.name = name
        this.age = age
    }
    speak(){
        console.log(`我叫：${this.name},今年${this.age}岁`);
    }
}

class Student extends Person{
    grade: string;
    constructor(name: string,age: number,grade: string){
        super(name,age) // 继承父类，必须使用super()方法
        this.grade = grade
    }
    study(){
        console.log(`${this.name} 正在努力学习中...`);
    }
}

const s = new Student("张三",15,"一年级")
s.speak() // 我叫：张三,今年15岁
s.study() // 张三 正在努力学习中..
console.log(s);
/**
{
    "name": "张三",
    "age": 15,
    "grade": "一年级"
}
*/
console.log(s.grade);// 一年级

class Person{
    public name: string;
    age: number;
    // 基本构造函数
    constructor(name: string,age: number){
        this.name = name
        this.age = age
    }
    speak(){
        console.log(`我叫：${this.name},今年${this.age}岁`);
    }
}
const p1 = new Person("张三",18)
// 类的外部，可以访问public修饰的属性
console.log(p1.name)

class Person {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
////////////// 简写后 /////////////
class Person1 {
    constructor(
        public name: string,
        public age: number
    ) {
    }
}

class Person {
    constructor(protected name: string,protected age: number) {}

    protected getDetails(){
        return `我叫：${this.name}，年龄是：${this.age}`
    }

    introduce(){
        console.log(this.getDetails);
    }
}
const p1 = new Person("tom",18)
p1.introduce()

// 无法访问，因为这些属性都是受保护的（protected）
// p1.name
// p1.age
// p1.getDetails

class Person {
    constructor(protected name: string,protected age: number) {}

    protected getDetails(){
        return `我叫：${this.name}，年龄是：${this.age}`
    }

    introduce(){
        console.log(this.getDetails);
    }
}

class Student extends Person{
    study(){
        this.introduce()
        console.log(`${this.name}正在努力学习`);
    }
}

const s1 = new Student("cat",10)
s1.study()

class Person {
    constructor(
        protected name: string,
        public age: number,
        private IDCard: string
    ) {}

    private getPrivateInfo(){
        return `身份证号码为：${this.IDCard}`
    }

    getInfo(){
        return `我叫：${this.name}，今年刚满${this.name}岁`
    }

    getFullInfo(){
        return this.getInfo+"，"+this.getPrivateInfo()
    }
}

const p1 = new Person("tom",18,"1231231233441")
// p1.name // 无法访问 protected
// p1.age // 可访问
// p1.IDCard // 无法访问 private

console.log(p1.getInfo());
console.log(p1.getFullInfo());
// p1.getPrivateInfo(); // 无法使用 private

class Person {
    constructor(
        protected readonly name: string,
        public readonly age: number,
        private IDCard: string
    ) {}
}

abstract class Animal{
    constructor(
        public name:string,
        public age:number,
        public type: string
    ){}

    abstract shout(): string

    do(){
        console.log(`一只叫做${this.name}的${this.type}开始发出：${this.shout()}的声音`);
    }
}
class Cat extends Animal{
    constructor(
        name:string,
        age:number,
    ){ super(name,age,"猫") }

    shout(): string {
        return "喵~~";
    }
}

const c1 = new Cat("蛋黄",3)
c1.do()

interface IPerson{
    name: string,
    age: number,
    number(n:number):void
}

class Person implements IPerson{
    
    constructor(
        public name: string,
        public age: number,
    ){}

    number(n: number): void {
        console.log(`测试：${n}`);
    }
}

const p = new Person("张三",18)
p.number(12)

const p1: IPerson = {
    name: "张三",
    age: 18,
    number: function (n: number): void {
        console.log(`测试：${n}`);
    }
}

interface IPerson{
    name: string,
    age: number,
    number(n:number):void
}
interface IPerson{
    grender: string
}

const f = <T,U>(a:T,b:U)=>{
    console.log(a,b);
}

// 使用泛型，指定传入方法内的类型
f<number,string>(1,"zhangsan")
f<number,number>(1,22)

class Person<T>{
    constructor(
        public name: string,
        public age: number,
        public extraInfo: T
    ){}

    speak(){
        console.log(`我叫：${this.name}今年${this.age}岁了`);
        console.log(this.extraInfo);
    }
}
const p1 = new Person<number>("tom",30,100)

type JobInfo = {
    title: string,
    company: string,
}
const p2 = new Person<JobInfo>("tom",30,{title:"程序员",company:"华为"})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--type需要更改为 module-->
    <script type="module" src="./index.js"></script>
</body>
</html>

import {add,mul} from './demo.js'

console.log(add(1,2));
console.log(mul(1,2));

export function add(a,b){
    return a+b;
}

export function mul(a,b){
    return a*b;
}

declare function add(a:number,b:number):number
declare function mul(a:number,b:number):number

export{add,mul};