![](/style/images/good.png)
![](/style/images/bad.png)
TypeScript Tips Part I
source link: https://www.tuicool.com/articles/hit/6bY3maU
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
We'll start off with the usual shameless plug of another blog post. If you haven't read it yet, check out my blog post, Consider Using TypeScript .
We're going to look at a few tips that may/can help you on your journey in TypeScript land.
First let's start off with some things to remember if you're migrating a React application to TypeScript.
-
When porting components to TypeScript, ensure that the file extension is
.tsx
, not.ts
. If you don't, you'll be scratching your head for hours as to why JSX is not being recognized. -
Also, ensure that you have the
"jsx"
TypeScript compiler option set properly as well. By default, it's set to"preserve"
. You want it to be set to"react"
. e.g. https://github.com/nickytonline/www.iamdeveloper.com/blob/master/tsconfig.json#L12
![EjmAFfy.jpg!web](https://img2.tuicool.com/EjmAFfy.jpg!web)
Nick Taylor
@nickytonline
An issue that's happened to me several times in the past+recently is whenever I migrate a React app to TypeScript where components are in .js files,I port them to .ts instead of .tsx and wonder for a long time why JSX isn't recognized.Saved you some debug time. #TypeScriptDiaries
01:49 AM - 25 Jan 2019
0
0
- Create a reusable
children
prop and add it to your component props' type via an intersection.
// some file housing the ChildrenProp export type ChildrenProp = { children: React.ReactNode }; // some other component file that consumes it. export type SomeComponentProps = ChildrenProp & { someOtherProp: boolean; ... };
- Bonus points, make it generic with a default, https://github.com/nickytonline/www.iamdeveloper.com/blob/master/types/children-prop.d.ts
Alright, let's move on to outside of React Land.
- If you're not sure what the shape of something you're building is yet, or you're consuming something that for whatever reason you don't know the shape, you're going to type it as
any
until you start to figure things out. If you're using TypeScript 3.0 and up, don't. Prefer theunknown
type.
You get all the benefits of the any
type, but as soon as you try to access anything on the object, you will need to do a type assertion. For more information, see the documentation on the unknown
type
![EjmAFfy.jpg!web](https://img2.tuicool.com/EjmAFfy.jpg!web)
Nick Taylor
@nickytonline
@jaredpalmer Also if you want to add to your defense, consider using `unknown` instead of `any`. ️ blogs.msdn.microsoft.com/typescript/201…
01:33 AM - 23 Jan 2019
1
9
Here's a TypeScript Playgound example if you want to see it in action.
- Sometimes you have code where you know something is going to exist no matter what, so you don't want to have a check to see if it's null or undefined. TypeScript allows you via the
!
operator to basically say, "Hey TypeScript, trust me, I know what I'm doing.".
For example, instead of doing this
const someElementReference = document.querySelector('.awesome-selector'); if (someElementReference) { someElementReference.setAttribute('data-i-checked-first', `I wasn't sure if you'd exist`); }
you could do this
const someElementReference = document.querySelector('.awesome-selector'); someElementReference!.setAttribute('data-yolo', `I know what I'm doing!`);
Use this sparingly because, well, this giphy.
That's all for now, until part II. I said it, so I need to write it now. :wink:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK