Ab heute starten wir eine Reihe von Veröffentlichungen der angepassten und ergänzten Übersetzung " TypeScript
. "
Jeder Wert in JavaScript
verhält sich beim Ausführen von Operationen auf eine bestimmte Weise. Dies mag etwas abstrakt klingen, aber als Beispiel versuchen wir, einige Operationen an einer Variablen auszuführen message
:
// `toLowerCase` // message.toLowerCase() // `message` message()
toLowerCase
. message
.
, , message
— — , .
-
message
? -
toLowerCase
? - ,
toLowerCase
? - , ?
, , , , .
, message
:
const message = 'Hello World'
, , , message.toLowerCase()
, .
? JS
, , :
TypeError: message is not a function // : message —
, .
, , JS
, , (type) — . TypeError
— , 'Hello World'
.
, string
number
, (runtime) typeof
. , , . , :
function fn(x) { return x.flip() }
, , flip
, JS
. , fn
, JS
. .
— , fn
, . JS
— () — , , .
, .
TypeError
, , string
. (bugs) .
, . , , TS
. . TS
, , , .
const message = 'Hello!' message() // This expression is not callable. Type 'String' has no call signatures. . 'String'
TS
, ( ).
,
— , JS
, . ECMAScript
, - .
, , . , , . , undefined
:
const user = { name: 'John', age: 30 } user.location // undefined
TS
, , :
const user = { name: 'John', age: 30 } user.location // Property 'location' does not exist on type '{ name: string; age: number; }'. 'location' ...
«» (catch) , .. ( ) .
:
const announcement = «Hello World!»; // ? announcement.toLocaleLowercase(); announcement.toLocalLowerCase(); // , announcement.toLocaleLowerCase();
- ,
function flipCoin() { // `Math.random()` return Math.random < 0.5; // Operator '<' cannot be applied to types '() => number' and 'number'. '<' ... }
const value = Math.random() < 0.5 ? «a» : «b»; if (value !== «a») { // ... } else if (value === «b») { // This condition will always return 'false' since the types 'a' and 'b' have no overlap. 'false', 'a' 'b' // , }
,
TS
. ? . TS
, , ( ), . , TS
. , TS
, « » , , .. , , , ..
tsc
, TS
tsc
:
yarn global add tsc
#
npm i -g tsc
hello.ts
:
// console.log('Hello World!')
() JS
:
tsc hello.ts
. , , . . , hello.js
. hello.ts
, TS
. , , .
. hello.ts
:
function greet(person, date) { console.log(`Hello, ${person}! Today is ${date}.`) } greet('John')
tsc hello.ts
, :
Expected 2 arguments, but got 1. 2 , 1
TS
, greet
, .
, , , hello.js
. , TS
. JS-, , , TS
. , , TS
, --noEmitOnError
. hello.ts
:
tsc --noEmitOnError hello.ts
, hello.js
.
TS
, person
— string
, date
— Date
. toDateString()
date
:
function greet(person: string, date: Date) { console.log(`Hello, ${person}! Today is ${date.toDateString().}`) }
, , (type annotations) person
date
, greet
.
TS
, :
function greet(person: string, date: Date) { console.log(`Hello, ${person}! Today is ${date.toDateString()}.`); } greet('John', Date()); // Argument of type 'string' is not assignable to parameter of type 'Date'. 'string' 'Date'
Date()
. , Date
, new Date()
:
greet('John', new Date());
, TS
(infer) :
const msg = 'Hello!' // const msg: string
greet
JS
tsc
. :
«use strict»; function greet(person, date) { console.log(«Hello « + person + «! Today is « + date.toDateString() + «.»); } greet(«John», new Date());
:
person
date
.
« » — , ( ```) — (+).
, , JS
( ECMAScript
, ), , JS
, , TS
.
, (downleveling), , , JS-, ECMAScript 2015
(ES6
), , ECMAScript 3
(ES3
). ( ) ES6
, TS
ES3
, . , , --target
. , tsc --target es2015 hello.ts
.
, TS
, . --strict
"strict": true
tsconfig.json
. , , noImplicitAny
strictNullChecks
.
noImplicitAny
—TS
,any
. , . ,TS
.noImplicitAny
,any
strictNullChecks
—null
undefined
. , , .strictNullChecks
null
undefined
,
10% !
