Pocketbook em TypeScript. Parte 1. Noções básicas



A partir de hoje estamos iniciando uma série de publicações da tradução adaptada e complementada " TypeScript



. "







Cada valor em, JavaScript



ao realizar qualquer operação nele, se comporta de uma determinada maneira. Isso pode parecer um tanto abstrato, mas, como exemplo, vamos tentar realizar algumas operações em uma variável 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());

      
      





:







  1. person



    date



    .







  2. « » — , ( ```) — (+).









, , 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% !














All Articles